<template>
	<!-- 我的二维码 -->
	<view class="content display  width-100 displayColumn all_item">
		<u-navbar @rightClick="rightClick" :autoBack="true" :placeholder="true">
			<template slot="left">
				<uni-icons type="left" color="#212121;" size="23" @click="back"></uni-icons>
			</template>
			<template slot="center">
				<text class="fontSize font_comm title">我的二维码</text>
			</template>
		</u-navbar>
		
		<view class="display fn_wodecode display width_699 displayColumn M-T30">
			<!-- 头像 -->
			<view class="myavator display  width_699 M-T24 displaycenter_aliem">
				<image class="image M-L24" src="@/static/img/nolog.png" mode=""></image>
				<span class="fontSize font_comm txt1" style="margin-left: 10rpx;">伊犁Zoey-one</span>
			</view>
			<view class="display all_item width_699 fn_canvas M-T80 displayColumn">
				 <canvas id="qrcode" canvas-id="qrcode" style="width:322rpx;height: 322rpx;margin-top: 30rpx;"></canvas>
				 <span class="fontSize font_comm txt2 M-T20">可向商家或好友出示二维码</span>
			</view>
			
		</view>
		
		
	</view>
</template>

<script>
	import UQRCode from '@/utils/uqrcode.js';
	export default {
		data() {
			return {
				
			}
		},
		onReady() {
			
			this.getCode()
			
		},
		methods: {
			getCode(){
				// 获取uQRCode实例
								var qr = new UQRCode();
								// 设置二维码内容
								qr.data = '123455';
								// 设置二维码大小，必须与canvas设置的宽高一致
								qr.size = 161; //默认为px
								// 调用制作二维码方法
								qr.make();
								// 获取canvas上下文
								var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
								// 设置uQRCode实例的canvas上下文
								qr.canvasContext = canvasContext;
								// 调用绘制方法将二维码图案绘制到canvas上
								qr.drawCanvas();
			}
		}
	}
</script>

<style scoped lang="scss">
.fn_wodecode{
	height: 646rpx;
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
}
.image{
	width: 80rpx;
	height: 80rpx;
	border-radius: 12rpx 12rpx 12rpx 12rpx;
}
.txt1{
	font-weight: 600;
	font-size: 28rpx;
	color: #212121;
}
.txt2{
	font-weight: 400;
	font-size: 28rpx;
	color: #72778A;
}
</style>
